<template>
    <a-modal :title="model.id ? '修改表单字段' : '新增表单字段'" :okText="model.id ? '修改' : '新增'" :width="800" visible v-if="visible" :confirmLoading="loading" @cancel="handleCancel" @ok="handleOk">
        <a-form layout="horizontal" :form="form">
            <a-form-item label="表单">
                <a-select :options="opts.form" v-decorator="['formId', { initialValue: model.formId, rules: [{ required: true, message: '请选择表单' }] }]"></a-select>
            </a-form-item>
            <a-form-item label="字段名称">
                <a-input v-decorator="['name', { initialValue: model.name, rules: [{ required: true, message: '请填写字段名称' }] }]"></a-input>
            </a-form-item>
            <a-form-item label="字段类型">
                <a-select :options="opts.type" v-decorator="['type', { initialValue: model.type, rules: [{ required: true, message: '请选择字段类型' }] }]"></a-select>
            </a-form-item>
            <a-form-item label="字段注释">
                <a-textarea
                    v-decorator="[
                        'comment',
                        {
                            initialValue: model.comment,
                            rules: [{ required: true, message: '请输入字段注释' }]
                        }
                    ]"
                />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script>
import moment from 'moment';
import { create } from '@/api/formext';
import { all } from '@/api/form';
import { openNotification } from '@/utils/util';

export default {
    name: 'LeaveForm',
    data() {
        return {
            moment,
            form: this.$form.createForm(this),
            model: {
                formId: null,
                name: null,
                type: null,
                comment: null
            },
            opts: {
                form: [],
                type: [
                    { label: '字符', value: 'string' },
                    { label: '数值', value: 'number' },
                    { label: '日期', value: 'date' },
                    { label: '其他', value: 'other' }
                ]
            },
            visible: false,
            loading: false
        };
    },
    mounted() {
        this.handleLoadFormData();
    },
    methods: {
        show(row) {
            if (row) {
                this.model = {
                    ...row
                };
            }
            this.visible = true;
        },
        hide() {
            this.form.resetFields();
            this.model = { formId: null, name: null, type: null, comment: null };
            this.$emit('refresh');
            this.visible = false;
        },
        async handleLoadFormData() {
            let res = await all();
            if (!+res.state) {
                this.opts.form = res.data.map(item => {
                    return { ...item, value: item.dataFormId, label: item.dataFormName };
                });
            }
        },
        handleCancel() {
            this.visible = false;
        },
        handleOk(e) {
            this.form.validateFieldsAndScroll(async err => {
                if (!err) {
                    this.loading = true;
                    this.model = Object.assign(this.model, this.form.getFieldsValue());
                    let res = await create(this.model);
                    if (!+res.state) {
                        openNotification('success', this.model.id ? '修改表单字段成功' : '新增表单字段成功');
                        this.hide();
                    } else {
                        openNotification('error', res.message);
                    }
                    this.$emit('save');
                    this.loading = false;
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped></style>
